<template>
  <div id="main" style="width:100%;height:100%;">
    <el-card class="box-card echarts-card">
      <div style="margin-top: 10px;">
        <el-table :header-cell-style="{background:'#f6f6f6'}"
        :data="list"
        v-loading="loading"
        stripe
        style="width: 100%">
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="170">
            <template slot-scope="scope">
              <el-button @click="getYCDevicesAttributeInfo(scope.row)" icon="el-icon-s-marketing" type="text" size="small">遥测数据</el-button>
              <el-button @click="getDevicesAttributeInfo(scope.row)" icon="el-icon-s-unfold" type="text" size="small">设备信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog
        title="设备列表"
        :visible.sync="dialogVisible"
        width="95%"
        class="carSearchDialog"
        :before-close="handleClose">
        <div class="dialog-div" style="width:100%">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p>设备列表</p>
            </div>
            <div>
              <el-table :header-cell-style="{background:'#dddddd80'}"
              id="mjInfoTable"
              :data="decivesList"
              v-loading="devicesloading"
              stripe
              border
              style="width: 100%">
                <el-table-column prop="keyName" label="keyName" width="150"></el-table-column>
                <el-table-column prop="dataSide" label="dataSide"></el-table-column>
                <el-table-column prop="dateTime" label="dateTime"></el-table-column>
                <el-table-column prop="value" label="value"></el-table-column>
                </el-table>
            </div>
          </el-card>
        </div>
      </el-dialog>

      <el-dialog
        title="遥测数据"
        :visible.sync="YCdialogVisible"
        width="95%"
        class="carSearchDialog"
        :before-close="YChandleClose">
        <div class="dialog-div" style="width:100%">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p>遥测数据</p>
            </div>
            <div>
              <el-table :header-cell-style="{background:'#dddddd80'}"
              id="mjInfoTable"
              :data="YCdecivesList"
              stripe
              border
              style="width: 100%">
                <el-table-column prop="keyName" label="keyName"></el-table-column>
                <el-table-column prop="dateTime" label="dateTime"></el-table-column>
                <el-table-column prop="value" label="value"></el-table-column>
                </el-table>
            </div>
          </el-card>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import myCommon from './common.vue'
export default{
  name: 'home',
  data () {
    return {
      customerId: '',
      list: [], // 设备列表list
      decivesList: [], // dialog 设备属性list
      loading: false, // 设备列表list loading
      devicesloading: false,
      dialogVisible: false, // dialog 是否展示
      YCdialogVisible: false,
      YCdecivesList: []
    }
  },
  mounted () {
    this.loading = true
    this.initAccountAndDiveces()
  },
  methods: {
    // 获取用户信息
    initAccountAndDiveces: function () {
      this.$axios.get(myCommon.HTTPURL + '/api/Account/MyInfo')
        .then((response) => {
          if (response.data.code === 10000) {
            this.customerId = response.data.data.customer.id
            this.getDivicesCustomerList()
          } else {
            this.$message.error('用户信息获取失败！请稍后重试或联系管理员')
          }
        })
        .catch(() => {
          this.$message.error('用户信息获取失败！请稍后重试或联系管理员')
        })
    },
    getDivicesCustomerList: function () { // 获取设备列表
      this.$axios.get(myCommon.HTTPURL + '/api/Devices/Customers/' + this.customerId)
        .then((response) => {
          this.list = response.data
          this.loading = false
        })
        .catch(() => {
          this.$message.error('设备列表获取失败！请稍后重试或联系管理员')
          this.loading = false
        })
    },
    getDevicesAttributeInfo: function (row) { // 获取设备属性
      this.$axios.get(myCommon.HTTPURL + '/api/Devices/' + row.id + '/AttributeLatest')
        .then((response) => {
          this.decivesList = response.data
          this.dialogVisible = true
        })
        .catch(() => {
          this.$message.error('设备列表获取失败！请稍后重试或联系管理员')
          this.dialogVisible = false
        })
    },
    getYCDevicesAttributeInfo: function (row) {
      this.$axios.get(myCommon.HTTPURL + '/api/Devices/' + row.id + '/TelemetryLatest')
        .then((response) => {
          this.YCdecivesList = response.data
          this.YCdialogVisible = true
        })
        .catch(() => {
          this.$message.error('设备列表获取失败！请稍后重试或联系管理员')
          this.YCdialogVisible = false
        })
    },
    handleClose: function () { // dialog关闭
      this.dialogVisible = false
      this.decivesList = [] // 还原初始值
      console.log('关闭')
    },
    YChandleClose: function () {
      this.YCdialogVisible = false
      this.YCdecivesList = [] // 还原初始值
    }
  }
}
</script>

<style>
  .echarts-card{
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .echarts-card>.el-card__body{
    height: 90%;
    margin: 10px auto;
    overflow-y: auto;
  }
  .echarts-refresh{
    float: right;
    color: cornflowerblue;
  }
  .echarts-refresh:hover{
    color: #0072ff;
    cursor: pointer;
  }
  @media screen and (max-width: 1211px) {
    .carSearchDialog>.el-dialog>.el-dialog__header>.el-dialog__title {
      line-height: 5vh;
      margin-left: 2%;
    }
    .carSearchDialog>.el-dialog>.el-dialog__header>.el-dialog__headerbtn {
       top: 16px !important;
    }
  }
  @media screen and (min-width: 1212px) {
    .carSearchDialog>.el-dialog>.el-dialog__header>.el-dialog__title {
      line-height: 5vh;
    }
  }
  .carSearchDialog>.el-dialog>.el-dialog__header {
    padding: 1%;
    height: 5%;
    background-color: #b9c1c5;
  }
  .carSearchDialog>.el-dialog>.el-dialog__body {
    padding: 1%;
    height: 86%;
    overflow-y: auto;
  }
  .carSearchDialog>.el-dialog{
    margin-top: 5vh !important;
    margin-bottom: 5vh !important;
    height: 90%;
  }
  .dialog-div>.box-card>.el-card__header {
    padding: 0px 20px;
  }
</style>
